<template>
  <z-modal
    :width="800"
    v-bind="modalOption"
    :okText="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="disableSubmit">
      <a-form-model slot="detail" layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
        <a-form-model-item label="商机名称" prop="businessName">
          <a-input v-model.trim="form.businessName" placeholder="请输入商机名称" ></a-input>
        </a-form-model-item>
        <a-form-model-item label="项目" prop="productName">
		    <a-input-search v-model="form.productName" readOnly placeholder="请选择项目" @search="onSearchProduct"  >
		  		<a-button slot="enterButton" >选择项目</a-button>
		    </a-input-search>
        </a-form-model-item>
		<a-form-model-item label="客户" prop="customerName">
		  <a-input-search v-model="form.customerName" placeholder="请选择客户" readOnly @search="onSearchCustomer"  >
			  <a-button slot="enterButton" >选择客户</a-button>
		  </a-input-search>
		</a-form-model-item>
        <a-form-model-item label="消息来源" prop="source">
          <z-dict-select-tag v-model="form.source" placeholder="请选择消息来源"  dictCode="news_source"  />
        </a-form-model-item>
        <a-form-model-item label="商机归属人" prop="ownerUserId">
          <ZSelectUserByDep :multi="false" v-model="form.ownerUserId" placeholder="请选择商机归属人" />
        </a-form-model-item>
        <a-form-model-item label="预估合同总额" prop="money">
          <a-input-number v-model="form.money" placeholder="请输入预估合同总额" style="width: 100%" />
        </a-form-model-item>
        <a-form-model-item label="销售阶段" prop="statusId">
          <z-dict-select-tag v-model="form.statusId"  dictCode="business_status" placeholder="请选择销售阶段" />
        </a-form-model-item>
        <a-form-model-item label="跟进公司" prop="companyName">
          <a-input v-model.trim="form.companyName" placeholder="请输入跟进公司" ></a-input>
        </a-form-model-item>
		<a-form-model-item label="跟进部门" prop="deptName">
		  <a-input-search v-model="form.deptName" placeholder="请选择跟进部门" readOnly @search="onSearchDept"  >
			  <a-button slot="enterButton" >选择部门</a-button>
		  </a-input-search>
		</a-form-model-item>
		<a-form-model-item label="有无合同" prop="isContract">
		  <z-dict-select-tag v-model="form.isContract"  dictCode="is_contract" placeholder="请选择有无合同"  />
		</a-form-model-item>

        <a-form-model-item label="合同上传" prop="fileList">
          <z-upload v-model="form.fileList" :fileNames="form.fileNames"></z-upload>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark">
          <a-textarea v-model.trim="form.remark" :maxLength=200 placeholder="请输入备注" ></a-textarea>
        </a-form-model-item>
      </a-form-model>
    </j-form-container>
    </a-spin>
	<SelectCustomerModal ref="selectModal" @ok="selectOK"></SelectCustomerModal>
	<SelectProductModal ref="selectModal2" @ok="selectOK2"></SelectProductModal>
	<SelectDeptModal ref="selectModal3" @ok="selectOK3"></SelectDeptModal>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import SelectCustomerModal from '@/pages/crm/customer/modules/SelectCustomerModal'
import SelectProductModal from '@/pages/crm/product/modules/SelectProductModal'
import SelectDeptModal from '@/pages/system/modules/SelectDeptModal'
import JFormContainer from '@/components/form/JFormContainer'
import ZUpload from '@/components/zz/ZUpload'
export default {
  name: 'CrmBusinessModal',
  mixins: [ModalFormMixin],
  components: {
    JFormContainer,
    ZDictSelectTag,
    ZSelectUserByDep,
    SelectCustomerModal,
	  SelectDeptModal,
	  SelectProductModal,
    ZUpload
  },
  data() {
    return {
      url: {
        add: "/business/add",
        edit: "/business/edit",
        queryById: "/business/queryById"
      },
      fileNames: ''
	  }
  },
  computed: {
    validatorRules() {
      return {
        businessName: [
          { required: true, message: '请输入商机名称!'}
        ],
        ownerUserId: [
          { required: true, message: '请选择商机归属人!'}
        ] ,
        fileList: [
          { required: this.form.isContract === '1', message: '请上传合同附件!'},
        ]
      }
    }
  },
  methods: {
    addAfter() {
    },
	onSearchCustomer() {
	  this.$refs.selectModal.showModal()
	},
	onSearchProduct() {
	  this.$refs.selectModal2.showModal()
	},
	onSearchDept() {
	  this.$refs.selectModal3.showModal()
	},
	selectOK(rows, idstr) {
	  if(!rows){
	    this.form.customerId = ''
	    this.form.customerName = ''
	  }else{
	    let row = rows[0]
	    this.form.customerId = row.id
	    this.form.customerName = row.customerName
	  }
	  this.form = Object.assign({},this.form)
	},
	selectOK2(rows, idstr) {
	  if(!rows){
	    this.form.productId = ''
	    this.form.productName = ''
	  }else{
	    let row = rows[0]
	    this.form.productId = row.id
	    this.form.productName = row.name
	  }
	  this.form = Object.assign({},this.form)
	},
	selectOK3(rows, idstr) {
	  if(!rows){
	    this.form.deptId = ''
	    this.form.deptName = ''
	  }else{
	    let row = rows[0]
	    this.form.deptId = row.deptCode
	    this.form.deptName = row.deptName
	  }
	  this.form = Object.assign({},this.form)
	}
  }
}
</script>
